/**
 * Created by shaotingzhou on 2017/5/17.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform,
    Dimensions,
    RefreshControl
} from 'react-native';
import Item from './dealManageItem'
var {width,height} = Dimensions.get('window');
let dataAry = [1,2,3,4,5,6]
var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});

export default class DealManage extends Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            show:true,     //钱数是否显示标示
            showNumber:'22233',   //显示的钱数
            number:'22233',     //钱数
            selectTime:true,   //默认选择日期
            timeTopDown:true,       //日期默认从高到低排列
            moneyTopDown:true,       //金额默认从高到低排列
            dataSource: ds.cloneWithRows(dataAry),
            isRefreshing:true

        };
    }
    render() {
        return (
            <View style={{flex:1}}>
                <View style={{alignItems:'center',backgroundColor:'rgba(38,198,218,1.0)',height:100}}>
                    <Text style={{marginTop:30,color:'white',marginLeft:5}}>我的总收入</Text>

                    <View style={{flexDirection:'row',marginTop:10}}>
                        <Text style={{color:'white',marginLeft:5,fontSize:18}}>{this.state.showNumber} 元</Text>
                        <TouchableOpacity onPress={()=>this.showNumber()}>
                            <Image source={ this.state.show == true ? require('../../image/眼睛.png') : require('../../image/闭眼.png')} style={{width: 20,height: 20,marginLeft:5}}/>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{height:4,backgroundColor:'#f5f5f5'}}></View>
                {/*中*/}
                <View style={{flexDirection:'row',height:40}}>
                    <TouchableOpacity onPress={()=>this.selectedTime()} >
                        <View style={{flexDirection:'row',width:width*0.5-0.5,justifyContent:'center',alignItems:'center',marginTop:5}}>
                            <Text style={{color:this.state.selectTime == true ? 'red' : 'black'}}>日期</Text>
                            <Image source={this.state.timeTopDown == true ? require('../../image/下箭头.png') : require('../../image/上箭头.png')} style={{width: 30,height: 30}}/>
                        </View>
                    </TouchableOpacity>

                    <View style={{width:1,backgroundColor:'#DEDEDE'}}></View>
                    <TouchableOpacity onPress={()=>this.selectedMoney()} >
                        <View style={{flexDirection:'row',width:width*0.5-0.5,justifyContent:'center',alignItems:'center',marginTop:5}}>
                            <Text style={{color:this.state.selectTime == false ? 'red' : 'black'}}>金额</Text>
                            <Image source={this.state.moneyTopDown == true ? require('../../image/下箭头.png') : require('../../image/上箭头.png')} style={{width: 30,height: 30}}/>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={{height:4,backgroundColor:'#f5f5f5'}}></View>
                {/*下*/}
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    enableEmptySections={true}  //去除警告
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={()=>this.onRefreshData()}
                        />
                    }
                />

            </View>
        );
    }


    //是否显示钱数
    showNumber =()=>{
        this.setState({
            show:!this.state.show
        })

        if(this.state.show == false){
            this.setState({
                showNumber:this.state.number
            })
        }else {
            this.setState({
                showNumber:'XXXX'
            })
        }

    }
    //选中日期
    selectedTime =()=>{
        this.setState({
            selectTime:true,
            timeTopDown:true,
        })
        if(this.state.selectTime == true){
            this.setState({
                timeTopDown:!this.state.timeTopDown
            })
        }

    }
    //选中金额
    selectedMoney =()=>{
        this.setState({
            selectTime:false,
            moneyTopDown:true,
        })
        if(this.state.selectTime == false){
            this.setState({
                moneyTopDown:!this.state.moneyTopDown
            })
        }
    }
    //listView的renderRow
    renderRow =(rowData,sectionID,rowID,highlightRow) =>{
        return(
            <Item rowData = {rowData} navigator={this.props.navigator}/>
        )
    }
    //请求数据
    componentDidMount(){
        this.setState({
            isRefreshing:false
        })
    }
    //刷新数据
    onRefreshData =()=>{

    }


};


var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    }
});

